<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>演示js8.2</title>
		<style>
			div{
				border: #0000FF solid 1px;
				margin: 5px;
				height: 150px;
				width: 150px;
				
			}
			.box{
				height: 300px;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="div1" class="box">
			<p>是啥</p>
		</div>
		<div class="box">
			
		</div>
		<div id="div3">
			
		</div>
		
		<br />
		<input type="checkbox" name="ckGroup" id="ck1" value="1" /><label for="ck1">复选框1</label>
		<input type="checkbox" name="ckGroup" id="ck2" value="2" /><label for="ck2">复选框2</label>
		<input type="checkbox" name="ckGroup" id="ck3" value="3" /><label for="ck3">复选框3</label>
		
		<a href="http://www.baidu.com" target="_blank" id="link1">不要点百度</a>
		<a href="http://www.google.com" target="_blank" id="link2">点百度</a>
		 
		<script type="text/javascript">
			
			// 若指定的id不存在则返回null
			var divOne = document.getElementById("div2");
			console.log(divOne);
			
			// 获取到指定id的一个html元素对象
			divOne = document.getElementById("div1");
			console.log(divOne);
			
			// 获取使用指定样式名的所有html元素。
			// 返回类型为HtmlCollection。这是使用html元素组成的数组
			var divTwo = document.getElementsByClassName("box");
			console.log(divTwo);
			// 获取使用指定标签名的所有html元素。
			// 返回类型为HtmlCollection。这是使用html元素组成的数组
			var divThree = document.getElementsByTagName("div");
			console.log(divThree);
			
			// 创建一个元素节点。参数为标签名
			var imgNode = document.createElement("img");
			// 可以直接设置元素属性
			imgNode.src = "2.jpg"
			// 把新的子节点添加到指定节点。
			divOne.appendChild(imgNode);
			
			// 创建属性节点disabled.控制元素是否被禁用
			var attrNode = document.createAttribute("disabled");
			// 设置属性节点的值为disabled。禁用
			attrNode.nodeValue = 'disabled';
			// 设置属性节点到指定元素.id为ck2的元素被设置为禁用
			document.getElementById("ck2").setAttributeNode(attrNode);
			
			
			var linkOne = document.getElementById("link1");
			// 设置a标签内的文本节点内容
			linkOne.firstChild.nodeValue = "撒旦法";
			
			// 创建文本节点
			var txtNode = document.createTextNode("点百度？");
			// 追加文本节点到元素内会与以前的文本节点共存
			linkOne.appendChild(txtNode);
			
			// 移除第一个子节点。移除后link1标签内就只剩下刚刚创建的文本节点
			linkOne.removeChild(linkOne.firstChild);

            // 把divOne中的imgNode节点替换为linkTwo节点
			var linkTwo = document.getElementById("link2");
            divOne.replaceChild(linkTwo, imgNode);		
            
            // 在divOne内把imgNode元素插入到linkTwo之前
			divOne.insertBefore(imgNode, linkTwo);

            // getAttribute获取指定的属性值
            console.log("现在ck2的disabled值为:" + document.getElementById("ck2").getAttribute("disabled"));
            // setAttribute设置指定的属性值
            document.getElementById("ck2").setAttribute("value", 22);
            // 获取设置属性之后的属性值
            console.log("现在ck2的value属性值为:" + document.getElementById("ck2").getAttribute("value"));
            
            // 设置div1内的字体颜色
            document.getElementById("div1").style.color = "red";
            
            // 设置div3的样式
            document.getElementById("div3").className = 'box';
		</script>
	</body>
</html>
